/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Cell, Table, TableBody, TableRow, Text, useTheme} from "customize-easy-ui-component";
import {DirectLink} from "../../../routing/Link";

export const TOFD图谱= ( {theme, orc,  rep,href} : {theme:any, orc: any, rep: any,href:string}
) => {
  const allPages = orc?._FILE_S图谱?.map(({name, url}: any, i: number) => {
    return <div key={i} css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'},}}>
      <div css={{"@media print": {height: '100vh', overflowY: 'hidden',}}}>
        <DirectLink href={href}>
            <Text variant="h3" css={{textAlign: 'center', marginTop: '1rem', "@media print": {pageBreakBefore: 'always', marginTop: 'unset',},
            }}>衍射时差法超声检测TOFD图谱</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
              <Text>序号：{i+1}</Text>
              <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </DirectLink>
        <Table fixed={["62%", "%"]} css={{
              //"@media print": {minHeight: reserve ? `calc(100vh - ${reserve})` : undefined}
                borderCollapse: 'collapse', "@media print": {minHeight: undefined}}}  tight miniw={800} >
          <TableBody>
            <DirectLink href={href}>
              <TableRow>
                <Cell colSpan={2} css={{
                  "@media print": {
                    height: '-webkit-fill-available',
                    pageBreakInside: 'avoid'
                  }, padding: 0,
                }}>
                  <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',flexDirection: 'column',
                    "@media print": {
                      marginTop: '1px', marginRight: '1px', marginBottom: '1px',
                      //minHeight: reserve? '65vh':undefined
                      minHeight: undefined,
                    },
                  }}>
                    {0===i && orc?.图谱说明 &&
                        <div css={{whiteSpace: 'pre-wrap',width: '100%'}}>
                          {orc?.图谱说明}
                        </div>
                    }
                    {url &&
                        <img src={process.env.REACT_APP_OSS_ENDP + url}
                             alt={url}
                             css={{
                               maxHeight: '14cm',
                               maxWidth: '-webkit-fill-available',
                               [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},
                               "@media print": {maxHeight: '86vh', maxWidth: '100%'},
                             }}
                        />
                    }
                  </div>
                </Cell>
              </TableRow>
            </DirectLink>
          </TableBody>
        </Table>
      </div>
    </div>
  });

  return <>
    { !(orc?._FILE_S图谱?.length>0) &&
        <DirectLink href={href}>
          <Text variant="h3" css={{textAlign:'center',"@media print": {display: 'none'}}}>
            TOFD图谱还未初始化或上传！
          </Text>
        </DirectLink>
    }
    { allPages }
  </>;
};


// export const 检测示意图= ( { orc,  repId, verId, rep } : { orc: any,repId: string,verId: string, rep: any}
// ) => {
//   const [views]=useImagesPage(orc, rep, '衍射时差法超声检测报告','检测示意图','_FILE_S示意');
//   return <> {views} </>;
// };
/**【通用】的附页的附加图;   部分参数可定做。比如：
 * @property inter : 表头左上角的位置有吗直接上Node;
 * @property cap : 末尾人员条的 最左边抬头。
 * */
export const 检测示意图= ({orc, rep,cap,memc,id='AttachedFigure',inter,href}
               :{orc:any, rep:any; cap?:string,memc?:string,id?:string,inter?:any,href:string}
) => {
  const theme= useTheme();
  const nothing=!orc?.示图说明 && !(orc?._FILE_S示意?.length>0);
  if(nothing)
      return <DirectLink href={href}>
          <Text variant="h3" css={{textAlign:'center',"@media print": {display: 'none'}}}>
            衍射时差法检测示意未初始化或上传！
          </Text>
      </DirectLink>;
  else  return <>
    <div id={id} css={{marginTop: '1rem', "@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}} }>
      <Text id='AttachInspect1' variant="h3" css={{textAlign: 'center',
      }}>衍射时差法检测示意图</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <div>{inter}</div>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["62%","%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}} tight miniw={800}>
      <TableBody>
        <DirectLink href={href}>
          <TableRow>
            <Cell colSpan={2} split={true}
                  css={{"@media print": {height: undefined}, padding: 0}}>
              {orc?.示图说明 &&
                  <div css={{whiteSpace: 'pre-wrap'}}>
                    {memc??'检测部位'}：<br/>
                    {orc?.示图说明}
                  </div>
              }
              {orc?._FILE_S示意?.map(({name, url}: any, i: number) => {
                return <div key={i} css={{"@media print": {pageBreakInside: 'avoid'}}}>
                  {i > 0 && <hr/>}
                  <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',}}>
                    {url &&
                        <img src={process.env.REACT_APP_OSS_ENDP + url} alt={url}
                             css={{
                               maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                               maxWidth: '-webkit-fill-available',
                               [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                               "@media print": {maxHeight: '86vh', maxWidth: '100%'},        //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                             }}
                        />
                    }
                  </div>
                </div>
              })}
            </Cell>
          </TableRow>
        </DirectLink>
      </TableBody>
    </Table>
  </>;
};

/*跨页的底部固定显示需要：
    <TableFoot>
      <TableRow> <CCell>
          <div css={{ height: '100%', display: 'flex', justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
            <div><Text>{cap??'检验'}：</Text>  </div>
            <div css={{textAlign: 'end'}}><Text >日期</Text> </div>
          </div></CCell>
        <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
          <div><Text >审核：</Text>  </div>
          <div css={{textAlign: 'end'}}><Text >日期</Text> </div>
        </div></CCell> </TableRow>
    </TableFoot>
跨页头部固定标题区域。@=类似打印页眉的，但是也可能显示在纸张的中间位置。
      <TableHead>
        <TableRow>
          <CCell colSpan={2}  css={{border:'none'}}>
            <div css={{"@media print": { pageBreakInside: 'avoid'}}}>
              <Text id='AttachInspect1' variant="h2" css={{
                textAlign: 'center',
              }}>衍射时差法超声检测报告</Text>
              <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <div>{inter}</div>
                <Text>报告编号：{rep.isp.no}</Text>
              </div>
            </div>
          </CCell>
        </TableRow>
      </TableHead>
* */
